<template>
  <div class="editor-textarea-box">
    <div name="content" id="content" placeholder="编辑内容"
         :style="{minHeight: ckEditorContHeight + 'px'}"></div>
  </div>
</template>

<script>
  import Http from '../../js/mod.http';

  export default {
    props: ['content', 'isEditor', 'ckHeight'],
    components: {},
    data() {
      return {
        editor: null,
        cont: '',
        is_editor: false,
        ckEditorContHeight: 300,
      }
    },
    created: function () {
      var _this = this;
      _this.is_editor = _this.isEditor ? _this.isEditor : false;
      _this.$f7.utils.nextTick(function () {
        var ckEditorContHeight = parseInt(_this.ckHeight) - 80;
        _this.ckEditorContHeight = ckEditorContHeight;
        _this.cont = _this.content;
        ClassicEditor.create(document.querySelector('#content'), {
          language: 'zh-cn',
          ckfinder: {
            uploadUrl: Http.getDomain() + Http.kInterfacePath.file.addRichText,
          },
          toolbar: ['heading', '|', 'alignment', 'bold', 'italic', 'link',
            'bulletedList', 'numberedList', 'imageUpload', 'blockQuote', 'undo',
            'redo'],
        }).then(editor => {
          _this.editor = editor;
          if (_this.editor != null) {
            _this.editor.setData(_this.cont);
            _this.editor.on('change', function (event) {
              _this.cont = this.getData();
              _this.$emit('changeEditorHtml', _this.cont);
            });
          }
          _this.$emit('editor', _this.editor);
          _this.$$('.editor-textarea-box .ck-editor__main').css('minHeight',
              ckEditorContHeight + 'px');
          _this.$$('.editor-textarea-box .ck-content').css('minHeight',
              ckEditorContHeight + 'px');
        }).catch(error => {
          console.error('ClassicEditor', error);
        });
      });
    },
    watch: {
      'isEditor': function () {
        const _this = this;
        _this.is_editor = _this.isEditor ? _this.isEditor : false;
      },
    },
    methods: {}
  }
</script>

<style scoped>
  .editor-textarea-box {
    height: 100%;
  }

  .editor-textarea-box #cke_1_contents, .editor-textarea-box .cke_reset {
    min-height: 360px !important;
  }

  .editor-textarea-box .ck-content, .editor-textarea-box .ck-editor__main {
    min-height: 360px !important;
  }
</style>